﻿<%@ page import="mvc.model.pojos.UserBean" %>
<%@ page import="mvc.model.pojos.AddressBean" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';
            src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot');
            src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('${pageContext.request.contextPath}/static/css/font/iconfont.woff2') format('woff2'),
            url('${pageContext.request.contextPath}/static/css/font/iconfont.woff') format('woff'),
            url('${pageContext.request.contextPath}/static/css/font/iconfont.ttf') format('truetype'),
            url('${pageContext.request.contextPath}/static/css/font/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/myOrder.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/myOrder.js"></script>
    <script type="application/json" src="${pageContext.request.contextPath}/static/js/CN.json"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/addr.js"></script>
</head>

<body>
<!--顶部样式-->
<header class="layout-header clearfix">
    <div class="mzcontainer">
        <!--魅族商标-->
        <div class="layout-header-logo">
            <a>
                <img src="${pageContext.request.contextPath}/static/img/1.png" style="max-width:125px;margin-top:28px;">
            </a>
        </div>
        <!--搜索框-->
        <ul class="layout-header-service">
            <li class="layout-search">
                <input class="meizu-header-input" type="text" name="魅族 Note9" id="魅族 Note9" placeholder="魅族 Note9" />
                <a><img src="${pageContext.request.contextPath}/static/img/2.png" class="layout-img-search" /></a>
            </li>
            <!--登录头像-->
            <li class="layout-header-service-item">
                <a class="layout-header-service-link" href="accountManagement.jsp">
                    <img src="${pageContext.request.contextPath}/static/img/3.jpg" style="height: 30px;width: 30px;border-radius: 100%;">
                </a>
            </li>
            <!--购物车图标-->
            <li class="layout-header-service-cat">
                <a class="layout-header-service-cat">
                    <img src="${pageContext.request.contextPath}/static/img/4.png" style="height: 30px;width: 30px;">
                    <span class="layout-header-service-cat-num">0</span>
                </a>
                <script>
                    $(function () {
                        $(".layout-header-service-cat").click(function () {
                            location.href = "/cart";
                        });
                    });
                </script>
            </li>
        </ul>
        <!--顶部条件搜索-->
        <ul class="layout-header-nav">
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">手机</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">声学</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">配件</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">生活</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">Flyme</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">服务</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">专卖店</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">社区</a>
            </li>
            <li class="layout-header-nav-item">
                <a class="layout-header-nav-link">APP下载</a>
            </li>
        </ul>
        <!--手机Hover列表-->
        <div>
            <a></a>
        </div>
        <!--顶部下划线-->
        <hr class="layout-header-downmenu"></hr>
    </div>
</header>
<!--中部订单页面显示-->
<div class="store-wrap">
    <!--首页订单跳转-->
    <div class="crumbs">
        <a>首页&nbsp;></a>
        <a>我的商城&nbsp;></a>
        <a id="my-order">我的订单</a>
    </div>
    <!--订单页面 -->
    <div class="main-clearfix">
        <div class="left-nav">
            <!--左边订单选项-->
            <div class="nav-main" id="nav-main-mk">
                <a class="type-title">订单中心</a>
                <a class="ml" id="m1">我的订单</a>
                <a class="ml" id="m2">我的回购单</a>
                <a class="type-title">个人中心</a>
                <a class="ml" id="m3">地址管理</a>
                <a class="ml" id="m4">我的收藏</a>
                <a class="ml" id="m5">消息管理</a>
                <a class="ml" id="m6">建议反馈</a>
                <a class="type-title">资产中心</a>
                <a class="ml" id="m7">我的优惠券</a>
                <a class="ml" id="m8">我的红包</a>
                <a class="ml" id="m9">我的回购金</a>
                <a class="type-title">服务中心</a>
                <a class="ml" id="m10">退款退换货跟踪</a>
                <a class="ml" id="m11">以旧换新</a>
            </div>
        </div>
        <!--右边格式-->
        <div class="right-content">
            <!--订单详情样式-->
            <div class="order-main">
                <div class="type-tab-btn">
                    <a class="allOrder-active">
                        全部订单
                    </a>
                    <span class="line">|</span>
                    <a class="waitPay">
                        待付款
                    </a>
                    <span class="line">|</span>
                    <a class="waitDeliver">
                        待发货
                    </a>
                    <span class="line">|</span>
                    <a class="hasDeliver">
                        已发货
                    </a>
                    <span class="line">|</span>
                    <a class="other">
                        其他
                    </a>
                </div>
                <!--订单明细样式-->
                <div class="list-head" style="width: 1030px">
                    <ul class="clearfix">
                        <li class="w50">
                            <select class="check-type">
                                <option>近三个月的订单</option>
                                <option>全部订单</option>
                            </select>
                            订单明细
                        </li>
                        <li class="w125">售后</li>
                        <li class="w125">金额</li>
                        <li class="w125">状态</li>
                        <li class="w125">操作</li>
                    </ul>
                </div>
                <!--订单详情页面-->
                <c:forEach items="${sessionScope.orders}" var="order">
                <div style="margin-top: 69px;min-height: 300px;" class="type-contain ui-load-container">
                    <div class="ui-load-content">
                        <input id="unPayNum" type="hidden" value="0" />
                        <table class="orderItem">
                            <tbody>
                            <tr class="trHead">
                                <td colspan="4" class="title clearfix">
                                    <div class="f-fl">
                                        下单时间：
                                        <span class="time">${order.otime}</span>
                                        订单号：
                                        <span class="orderNumber">${order.oid}</span>
                                        <a class="kefu j-kefu"> 联系客服</a>
                                    </div>
                                </td>
                            </tr>
                            <tr class="list-box b-l b-r b-b">
                                <td class="list b-r j-iamCart">
                                    <div class="cart-wrap j-CartWrap">
                                        <div class="shop j-shop">
                                            <div class="item b-t clearfix j-iamMain">
                                                <a class="productDetail nameWidth" target="_blank">
                                                    <img src="${pageContext.request.contextPath}/static/img/cg.png" class="f-fl"  />
                                                </a>
                                                <div class="describe f-fl ">
                                                    <div class="vertic clearfix">
																	<span class="clearfix">
																		<a class="productDetail nameWidth" target="_blank">

                                          ${order.pname} ${order.online==0?"全网通版":order.online==1?"移动":"其他"} ${order.color} ${order.rsize}+${order.msize}G
																		</a>
																		<p >
                                           			 ￥${order.price}
                                          			  ×${order.count}
                                          				</p>
																	</span>
                                                    </div>
                                                </div>
                                                <input type="hidden" class="orderSn" value="51080804181123160081" />
                                                <input type="hidden" class="isCart" value="1" />
                                                <input class="orderSnSon" type="hidden" value="21080804181123162081" />
                                                <input type="hidden" class="supplierId" value="1" />
                                                <input type="hidden" class="supportXiaoneng" value="1" />
                                                <input type="hidden" class="brandName" value="魅族" />
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="b-r w125 center price b-t">
                                    <div class="priceDiv">
                                        ￥ ${order.sum}
                                        <span class="huabei j-huabei">花呗分期</span>
                                    </div>
                                </td>
                                <td class="b-r w125 center state b-t">
                                    <div class="stateDiv">
                                        <div>
                                            ${order.status}<br>
                                        </div>
                                    </div>
                                </td>
                                <td class="w125 center opreat b-t">
                                    <ul>
                                        <li class="more">
                                            <a target="_blank">查看详情</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                </c:forEach>
               <%-- <div class="ui-load-container">
                    <div class="J_no_data_des-1">
                        <p class="J_no_data_des">(全部订单)您暂无此类订单，赶快去下单吧！</p>
                    </div>
                    <div class="J_no_data_des-2">
                        <p class="J_no_data_des">(待付款)您暂无此类订单，赶快去下单吧！</p>
                    </div>
                    <div class="J_no_data_des-3">
                        <p class="J_no_data_des">(待发货)您暂无此类订单，赶快去下单吧！</p>
                    </div>
                    <div class="J_no_data_des-4">
                        <p class="J_no_data_des">(已发货)您暂无此类订单，赶快去下单吧！</p>
                    </div>
                    <div class="J_no_data_des-5">
                        <p class="J_no_data_des">(其他)您暂无此类订单，赶快去下单吧！</p>
                    </div>
                </div>--%>
                <input type="hidden" id="pageId" value="0" />
            </div>
            <!--回购单样式-->
            <div class="right-content-fr">
                <div class="backOrder-main">
                    <a class="gotoBack">我要回购</a>
                    <div class="type-tab-btn">
                        <a class="active-allOrder">回购单列表</a>
                        <span class="amount-actAmount"></span>
                    </div>
                    <div class="list-head-fr">
                        <ul class="clearfix-fr">
                            <li>产品型号</li>
                            <li>回购价格</li>
                            <li>评估描述情况</li>
                            <li>当前回购状态</li>
                            <li>操作</li>
                        </ul>
                    </div>
                    <div class="type-contain">
                        <p class="J_no_data_des">
                            <a>您暂无回购单，赶快去以旧换新吧！</a>
                        </p>
                    </div>
                </div>
            </div>
            <!--地址管理样式-->
            <div class="right-content-f-fr">
                <div class="address-main">
                    <div class="main">
                        <!--新增地址头部-->
                        <div class="row">
                            <span class="title rollit">新增收货地址</span>
                            <span class="gray">
								（您目前已有地址
									<i class="gray">${sessionScope.addrList.size()}</i>
									个，最多还可以增加
									<i class="settle">${10-sessionScope.addrList.size()}</i>
									个）
									</span>
                        </div>
                        <!--填写地址信息-->
                        <script>
                            $(function () {
                                $(".saveAddress").click(function () {
                                    let people = $("#name").val();
                                    let phone = $("#phone").val();
                                    let province = $("#province").val();
                                    let city = $("#city").val();
                                    let county = $("#county").val();
                                    let village = $("#village").val();
                                    let addr = $("#detailAddress").val();
                                    let isdefault = document.getElementById("default").checked ? 1 : 0;
                                    let flag = 1;
                                    let da = {
                                        people: people,
                                        phone: phone,
                                        province: province,
                                        city: city,
                                        county: county,
                                        village: village,
                                        addr: addr,
                                        uid:${sessionScope.user.getUid()},
                                        isdefault: isdefault,
                                        flag: flag
                                    };
                                    console.log(da);
                                    $.ajax({
                                        url: "/addr",
                                        type: "POST",
                                        dataType: "json",
                                        data: {
                                            addr: JSON.stringify(da)
                                        },
                                        success: function (data) {
                                            alert(data);
                                            window.location.href = "myOrder.jsp";
                                        }
                                    });
                                });
                            });
                        </script>
                        <form id="valid-form">
                            <div class="content">
                                <div class="row namePhone clearfix">
                                    <div class="f-fl addressName">
												<span>
											收货人姓名
											<i class="mark">*</i>
										</span>
                                        <input id="name" class="varify" name="receiver" type="text" placeholder="长度不超过15个字"
                                               maxlength="15"/>
                                        <!--<span class="error">必填</span>-->
                                    </div>
                                    <div class="f-fl addressPhone">
												<span>
											收货人手机号
											<i class="mark">*</i>
										</span>
                                        <input id="phone" name="telNumber" class="varify" type="text"
                                               placeholder="请输入11位手机号" maxlength="11"/>
                                        <!--<span class="error">必填</span>-->
                                    </div>
                                </div>
                                <div class="row clearfix receverAddress">
											<span class="f-fl">
										收货人地址
										<i class="mark">*</i>
									</span>
                                    <!--省-->
                                    <div class="mzui_select mzui_select_province f-fl">
                                        <input id="province" readonly="readonly" type="text"
                                               class="mzui_select_trigger province" placeholder="省/直辖市"/>
                                        <ul class="pro province"></ul>

                                    </div>
                                    <!--城市-->
                                    <div class="mzui_select mzui_select_city f-fl">
                                        <input readonly="readonly" id="city" type="text" class="mzui_select_trigger city" placeholder="城市"/>
                                        <ul class="pro city"></ul>
                                    </div>
                                    <!--区、镇、县 -->
                                    <div class="mzui_select mzui_select_city f-fl">
                                        <input readonly="readonly" id="county" type="text" class="mzui_select_trigger area" placeholder="区/县"/>
                                        <ul class="pro county"></ul>
                                    </div>
                                    <!--乡镇、街道-->
                                    <div class="mzui_select mzui_select_town f-fl">
                                        <input id="village" type="text" class="mzui_select_trigger town"
                                               placeholder="乡镇/街道"/>

                                    </div>
                                </div>
                                <!--详细地址 -->
                                <div class="row  detailAddress">
											<span>
												详细地址
												<i class="mark">*</i>
											</span>
                                    <input id="detailAddress" name="address" class="varify errorRed" type="text"
                                           placeholder="请输入不少于4不超过50个字的详细地址，例如：路名，门牌号" minlength="4" maxlength="50"/>
                                    <!--<span class="error">请详细填写地址信息</span>-->
                                </div>
                                <div class="opreat">
                                    <label for="default">
                                        <input id="default" class="setDefault" type="checkbox" name="isDefault"/>
                                        设为默认
                                    </label>
                                    <a class="saveAddress">保存</a>
                                </div>
                            </div>
                        </form>
                        <!--已有地址模块-->
                        <div class="list">
                            <div class="row">
                                <div class="title">
                                    <div>已有地址</div>
                                </div>
                            </div>
                            <div class="listHead">
                                <span class="center w15">收货人姓名</span>
                                <span class="center w35">收货人地址</span>
                                <span class="center w25">收货人手机号</span>
                                <span class="center w10">操作</span>
                            </div>
                            <ul id="tableList">
                                <c:forEach items="${sessionScope.addrList}" var="addr">
                                <li>
                                    <input class="addressId" type="hidden" value=""/>
                                    <input class="isOld" type="hidden" value=""/>
                                    <span class="center w15">${addr.people}</span>
                                    <span class="completeAddress center w35">${addr.province}${addr.city}${addr.county}${addr.village}${addr.addr}</span>
                                    <span class="center w25">${addr.phone}</span>
                                    <span class="center w10">
												<a class="edit">修改</a>
												<a class="delete" addrid="${addr.anumber}">删除</a>
											</span>
                                    <span class="left w15">
												<i class="iconfont icon-default">&#xe60e;</i>
												<i class="beDefault hide">设为默认</i>
											</span>
                                </li>
                                </c:forEach>
                            </ul>
                            <script>
                                $(function () {
                                    $("#tableList").on("click", ".delete", function () {
                                        let anumber = $(this).attr("addrid");
                                        $.ajax({
                                            type: "get",
                                            url: "/upAddr",
                                            data: {
                                                anumber: anumber
                                            },
                                            async: false
                                        }).done(function (data) {
                                            alert(data);
                                            window.location.href = "myOrder.jsp";
                                        });
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
            <!--退款详情样式-->
            <div class="service-order-main">
                <div class="type-tab-btn">
                    <div class="type-tab-btn">
                        <a class="active-allOrder">售后退换货</a>
                        <span class="amount-actAmount"></span>
                    </div>
                    <div class="list-head-btn">
                        <ul class="clearfix-btn">
                            <li class="w50">订单商品</li>
                            <li class="w125">&nbsp;</li>
                            <li class="w125">退款金额</li>
                            <li class="w125">
                                <form id="status-query-form">
                                    <select id="status-qurey">
                                        <option value="-1" selected="true">全部状态</option>
                                        <option value="0">待售后处理</option>
                                        <option value="6">商品待寄回</option>
                                        <option value="8">换货商品待收货</option>
                                        <option value="1">待售后验收</option>
                                        <option value="3">售后完成</option>
                                        <option value="4">售后关闭</option>
                                    </select>
                                </form>
                            </li>
                            <li class="w125">操作</li>
                        </ul>
                    </div>
                    <div class="type-contain ui-load-container">
                        <p class="J_no_data_des">
                            您暂无此类订单，赶快去下单吧！
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部 -->
    <div class="meizu-footer">
        <div class="meizu-footer-link">
            <!--底部服务项目-->
            <div class="meizu-row">
                <ul class="meizu-footer-service">
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu49.png" />
                            <span>满80免运费</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu50.png" />
                            <span>100+ 城市次日送达</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu51.png" />
                            <span>7天无理由退货</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu52.png" />
                            <span>15天换货保障</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu53.png" />
                            <span>1年免费保修</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu54.png" />
                            <span>上门快修</span>
                        </a>
                    </li>
                </ul>
                <div class="onlive-server">
                    <span>周一至周日 7:30-24:00</span>
                    <p class="tel">400-788-3333</p>
                    <a class="onlive-btn">在线客服</a>
                </div>
            </div>
            <!--服务项目划线-->
            <hr class="foot-hr" />
            <!--底部了解详情-->
            <div class="meizu-footer-co">
                <div class="meizu-row-row">
                    <div class="meizu-footer-info">
                        <div class="meizu-footer-info-left">
                            <ul class="clearfix">
                                <li>
                                    <a><span>了解魅族</span></a>
                                </li>
                                <li>
                                    <a><span>加入我们</span></a>
                                </li>
                                <li>
                                    <a><span>联系我们</span></a>
                                </li>
                                <li>
                                    <a><span>Flyme</span></a>
                                </li>
                                <li>
                                    <a><span>魅族社区</span></a>
                                </li>
                                <li>
                                    <a><span>天猫旗舰店</span></a>
                                </li>
                                <li>
                                    <a><span>问题反馈</span></a>
                                </li>
                                <li>
                                    <a><span>线上销售授权名单公示</span></a>
                                </li>
                                <li>
                                    <a><span>出版物经营许可证证</span></a>
                                </li>
                                <li>
                                    <a><span>简体中文</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meizu-footer-certificate">
                ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                <a>粤ICP备13003602号</a>
                <a>合字B2-20170010</a>
                <a>营业执照</a>
                <a>法律声明</a>
                <span>粤公网安备 44049102496009号</span>
                <a></a>
                <a></a>
                <a></a>
            </div>
            <div class="ii-subscribe">
                <a><img src="${pageContext.request.contextPath}/static/img/meizu115.png" /></a>
                <span class="li-hr"></span>
                <a><img src="${pageContext.request.contextPath}/static/img/meizu116.png"></a>
                <span class="li-hr"></span>
                <a><img src="${pageContext.request.contextPath}/static/img/meizu117.png"></a>
            </div>
        </div>
    </div>
</div>
</body>

</html>